$(function () {
  $(".area").click(function () {
    $(this).css({
      "background-color": "#fff",
      "z-index": "4",
      "border-color": "#ccc",
    });
    $(".chose").css({ display: "block" });
    $(".border").css({ display: "block" });
  });
  $(".area-item").click(function () {
    $(".area-item>div").remove();
    $(this)
      .removeClass("titel-item-current")

      .addClass("title-item-current")
      .prepend("<div></div>")
      .append("<div></div>");

    $(".area-item>div:first").css({
      top: "-1px",
      height: "2px",
      "background-color": "#f10180",
      position: "absolute",
      left: "-1px",
      width: "70px",
    });
    $(".area-item>div:last").css({
      bottom: "-1px",
      height: "1px",
      "background-color": "#fff",
      position: "absolute",
      left: "-1px",
      width: "70px",
    });
  });
  $(".tool").hover(
    function () {
      $(this).addClass("tool-hover");
      $(".tool-cn").show();
    },
    function () {
      $(this).removeClass("tool-hover");
      $(".tool-cn").hide();
    }
  );
  $(".tool-cn").hover(
    function () {
      $(".tool").addClass("tool-hover");
      $(this).show();
    },
    function () {
      $(".tool").removeClass("tool-hover");
      $(this).hide();
    }
  );
  $(".more-wrap").hover(
    function () {
      $(".channel-item-group").show();
    },
    function () {
      $(".channel-item-group").hide();
    }
  );
  $(".channel-item-group").hover(
    function () {
      $(this).show();
    },
    function () {
      $(this).hide();
    }
  );
  $(".main-nav-atag:gt(1)").hover(
    function () {
      $(".main-nav-atag:gt(1)").css({
        color: "#333",
      });
      $(this).css({
        color: "red",
      });
    },
    function () {
      $(".main-nav-atag:gt(1)").css({
        color: "#333",
      });
    }
  );
  $(".channel-more-itemlink").hover(
    function () {
      $(".channel-more-itemlink").css({ color: "#333" });
      $(this).css({
        color: "red",
      });
    },
    function () {
      $(".channel-more-itemlink").css({ color: "#333" });
    }
  );
  // nav吸顶JSJS
  let navFlag = true;
  $(window).scroll(function () {
    let st = $(this).scrollTop();
    if (st > $(".main-nav").offset().top + $(".main-nav").outerHeight()) {
      if (navFlag) {
        navFlag = false;
        $(".main-nav:eq(1)").css({
          position: "fixed",
          top: "-43px",
          width: "100%",
        });
        let num = -43;
        var timer = setInterval(() => {
          num += 1;
          $(".main-nav:eq(1)").css({
            top: num + "px",
          });
          if (num == 0) {
            clearInterval(timer);
          }
        }, 10);
      }
    } else {
      navFlag = true;
      $(".main-nav:eq(1)").css({
        position: "relative",
        top: "0",
        width: "auto",
      });
    }
  });
  // 商品分类
  $(".main-nav-category,.cate-menu").hover(
    function () {
      $(".cate-menu").css({
        height: "495px",
      });
    },
    function () {
      $(".cate-menu").css({
        height: "0px",
      });
    }
  );
  //轮播图
  let navCount = 0;
  //初始展示轮播图第一张
  $(".banner-list-item").eq(navCount).css({
    opacity: "1",
    "z-index": "2",
  });
  $(".banner-trigger-line").css({
    left: "293px",
  });
  function foo() {
    navCount++;

    if (navCount == $(".banner-list-item").length) {
      navCount = 0;
    }
    if (navCount <= -1) {
      navCount = $(".banner-list-item").length - 1;
    }
    if (navCount == 0) {
      $(".banner-trigger-line").animate(
        {
          left: "293px",
        },
        300
      );
    }
    if (navCount == 1) {
      $(".banner-trigger-line").animate(
        {
          left: "488px",
        },
        300
      );
    }
    $(".banner-list-item")
      .eq(navCount)
      .show()
      .stop()
      .animate(
        {
          opacity: "1",
          "z-index": 2,
        },
        1500
      )
      .siblings()
      .stop()
      .hide()
      .css({
        opacity: "0",
        "z-index": 1,
      });
  }
  let timer = setInterval(foo, 5000);
  //为了划入停止轮播
  $(".banner-list,.arrows,.banner-trigger").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      timer = setInterval(foo, 5000);
    }
  );
  $(".banner-btn-left").click(function () {
    navCount -= 2;

    foo();
  });
  $(".banner-btn-right").click(function () {
    foo();
  });
  $(".banner-trigger-btns>li:first").mouseover(function () {
    navCount = -1;
    foo();
  });
  $(".banner-trigger-btns>li:last").mouseover(function () {
    navCount = 0;
    foo();
  });
  //左右箭头
  $(".banner-con").hover(
    function () {
      $(".banner-btn-left").css({
        left: 0,
      });
      $(".banner-btn-right").css({
        right: 0,
      });
    },
    function () {
      $(".banner-btn-left").css({
        left: "-33px",
      });
      $(".banner-btn-right").css({
        right: "-33px",
      });
    }
  );
});
//获取接口
axios
  .get("http://jx.xuzhixiang.top/ap/api/allproductlist.php", {
    params: {
      uid: 134063,
    },
  })
  .then(function (res) {
    console.log(res);
    let waterFall = res.data.data;

    let str = "";
    class WaterFall {
      constructor(res) {
        this.res = res;
      }
      scroll() {
        let res = this.res;
        let str = "";
        let flag = false;
        $(window).scroll(function () {
          let height = $(".water-fall-list-item").outerHeight();
          if (
            $(this).scrollTop() >=
            $(".water-fall-list-item:last").offset().top - height
          ) {
            res.forEach(function (i, n) {
              str += `<div class="water-fall-list-item" data-id="${i.pid}">
                 <a href="#"
                   ><img src="${i.pimg}" alt="" />
                   <div class="water-fall-list-item-name">
                     <span class="water-fall-num">${i.pprice}</span>
                    <span class="water-fall-str">${i.pname}</span>
                     <span>${i.pdesc}</span>
                   </div></a
                >
              </div>`;
              $(".water-fall-list").html(str);
            });
          }
          let oDiv = document.querySelectorAll(".water-fall-list-item");
          for (let i = 0; i < oDiv.length; i++) {
            oDiv[i].onclick = function () {
              let pid = oDiv[i].getAttribute("data-id");
              setCookie("pid", pid, 7);
              location.assign("detail.html");
            };
          }
        });
      }
    }
    let water = new WaterFall(waterFall);
    water.scroll();
  });
//存数据
// axios
//   .get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
//     params: {
//       pimg: "images/yingshi.webp",
//       pname: "折起",
//       pprice: 3.0,
//       pdesc: "英式专场",
//       uid: 134063,
//     },
//   })
//   .then(function (res) {
//     console.log(res);
//   });
//766559  766558
//删除数据
// axios
//   .get("http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?", {
//     params: {
//       pid: 7674646,
//       uid: 134063,
//       token: "c342611bbd35ed49d794e5b083f6ed91",
//     },
//   })
//   .then(function (res) {
//     console.log(res);
//   });
//登录接口
// axios
//   .get("http://jx.xuzhixiang.top/ap/api/login.php", {
//     params: {
//       username: 17513235907,
//       password: 123456,
//     },
//   })
//   .then(function (res) {
//     console.log(res);
//   });
